@page "/docs/columns/responsiveness"
@layout DocLayout

<Title>响应式列布局(Columns responsiveness)</Title>
<Subtitle Size="Size.Size4">
    处理每个断点的 不同列布局
</Subtitle>
<hr>

<Title Size="Size.Size4" IsSpaced>
    Mobile columns
</Title>

<Content>
    <p>
        默认情况下，列只在 平板(tablet) 及以上视口激活，这意味着列在 <strong>移动设备</strong> 上是堆叠的。
        <br>
        如果您希望也在 移动设备(mobile) 上也生效，只需要在 <code>columns</code> 容器上添加 <code>IsMobile</code> 修饰符。
    </p>
</Content>

<DocView ComType="Responsiveness1"></DocView>

<br>
<Content>
    <p>
        如果你只想在 <strong>桌面(desktop)</strong> 以上显示列，只需要在 <code>Columns</code> 容器上添加 <code>IsDesktop</code> 修饰符:
    </p>
</Content>
<DocView ComType="Responsiveness2"></DocView>

<hr>
<Title Size="Size.Size4" IsSpaced>
    不同断点的列尺寸
</Title>
<Content>
    <p>你可以为每个视口定义 列大小：mobile（移动设备），tablet（平板设备）和 desktop（桌面设备）</p>
    <p>注：BulmaBlazor没有提供的属性，完全可以使用原始class来实现</p>
</Content>
<DocView ComType="Responsiveness3"></DocView>
